<template>
  <div>
    <el-form 
      size="small"
      :inline="true" 
      :model="formInline" 
      class="demo-form-inline"
    >
      <el-form-item 
        label="待办类别"
        prop="type"
      >
        <el-select
          clearable
          v-model="formInline.type"
          placeholder="请选择待办类别"
        >
          <el-option
            v-for="item in typeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item 
        label="手机号"
        prop="province"
      >
        <el-select
          clearable
          v-model="formInline.province"
          placeholder="请选择省份"
        >
          <el-option
            v-for="item in provinceList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item 
        label="手机号"
        prop="economicEvent"
      >
        <el-select
          clearable
          v-model="formInline.economicEvent"
          placeholder="请选择经济事项"
        >
          <el-option
            v-for="item in provinceList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">查询</el-button>
        <el-button type="" @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        type: '',
        province: '',
        economicEvent: "",
      },
      typeList: [
        { value: '1', label: '待办' },
        { value: '2', label: '已办' },
      ],
      provinceList: [
        { value: '1', label: '江苏' },
        { value: '2', label: '四川' },
      ],
      // rules: {
      //   type: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
      //   province: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
      // }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log(this.formInline);
        } else {
          console.log('error submit!!');
        }
      });
    },
    getParams() {
      return {
        type: this.formInline.type,
        province: this.formInline.province,
        economicEvent: this.formInline.economicEvent,
      }
    },
    handleQuery() {
      this.$emit('query')
    },
    handleReset() {
      this.$refs.form.resetFields();
    }
  }
}
</script>